<!--  -->
<template>
  <div name="content">
    <header>
      <h1>加入我们的社区，一起创造音乐梦想吧！</h1>
      <button @click="$router.push('/download')">开 始 体 验</button>
    </header>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  methods: {},

  mounted(){
    console.log("HomePhone")
  }
}

</script>
<style lang='scss' scoped>

header{

  background: url('../assets/photo/music01.jpg') no-repeat center;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 52px);
  

  h1{
    margin: 0 40px;
    position: absolute;
    top: 20%;
    font-size: 32px;
    color: #fff;
    font-family: jiangxizhuokai;
  }

  button{
    width: 60%;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 24px;
    border-radius: 10px;
    border: 0;
    background-color: rgba($color: #fff, $alpha: 0.8);
    box-shadow: 0px 0px 20px rgba($color: #19C6A6, $alpha: 0.2),
    0px 0px 10px rgba($color: #19C6A6, $alpha: 0.5),
    0px 0px 5px rgba($color: #19C6A6, $alpha: 0.8);
    font-weight: bold;
  }
}

</style>